<template>
  <div id="cart" v-loading="loading">
    <div class="container">
      <div class="cart-main" v-if="cartProducts.length">
        <div class="cart-head">
          <div class="check-all">
            <el-checkbox v-model="isCheckAll"></el-checkbox>
            &nbsp;全选
          </div>
          <div class="title">商品名称</div>
          <div class="price">单价</div>
          <div class="count">数量</div>
          <div class="totalPrice">小计</div>
          <div class="act">操作</div>
        </div>
        <div class="cart-list">
          <div class="line"></div>
          <div class="item" v-for="(item, index) in cartProducts" :key="index">
            <div class="product">
              <div class="check">
                <el-checkbox
                  :value="item.isChecked"
                  @change="handleOneChange(item, $event)"
                ></el-checkbox>
              </div>
              <div class="img">
                <router-link :to="`/product/${item.s_good.id}`">
                  <img :src="item.s_good.s_goods_photos[0].path" alt="" />
                </router-link>
              </div>
              <div class="title">
                <router-link :to="`/product/${item.s_good.id}`">
                  {{ item.s_good.desc.split("-")[0] }}
                </router-link>
              </div>
              <div class="price">
                {{ item.s_good.sale_price || item.s_good.price }}
              </div>
              <div class="count">
                <div class="minus" @click="decrement(item)">-</div>
                <input type="text" v-model="item.num" autocomplete="off" />
                <div class="plus" @click="increment(item)">+</div>
              </div>
              <div class="totalPrice">{{ item.totalPrice }}元</div>
              <div class="del" @click="open(item)">X</div>
            </div>
            <div
              class="peijian"
              v-for="(ele, indexSon) in item.parts"
              :key="indexSon"
            >
              <div class="left">
                <span @click="addtocart(ele)"
                  ><i class="iconfont icon-jia"></i
                ></span>
                <router-link to="/">
                  <img :src="ele.s_goods_photos[0].path" alt="" />
                </router-link>
                <div class="peijian-name">
                  <router-link :to="`/products/${ele.id}`">
                    ￥305积分最高可抵扣10%
                    {{ ele.desc.split("-")[0] }}
                  </router-link>
                </div>
              </div>
              <div class="peijian-price">￥{{ ele.sale_price }}</div>
            </div>
          </div>
        </div>
        <div class="cart-foot">
          <div class="cart-act">
            <router-link to="/">继续购物</router-link>|
            <span @click="clearCart">清空购物车</span>
          </div>
          <div class="right">
            <div class="cart-count">
              总金额:
              <span>{{ selectPrice }}</span
              >元
            </div>
            <div class="checkout">
              <button @click="checkOutOrder">下单结算</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 购物车为空时 -->
      <div class="cart-null" v-if="!cartProducts.length && !loading">
        <div class="empty-cart">
          <span>您的购物车还是空的!</span>
          <router-link to="/"> 马上去购物 </router-link>
        </div>
      </div>
      <!-- 热门商品 -->
      <div class="recommend-goods">
        <div class="title">热门商品</div>
        <div class="list">
          <div
            class="item"
            v-for="(item, index) in recommendProds.slice(0, 4)"
            :key="index"
          >
            <router-link :to="`/product/${item.id}`">
              <img :src="item.s_goods_photos[0].path" alt="" />
            </router-link>
            <router-link :to="`/product/${item.id}`" class="title">
              {{ item.desc.split("-")[0] }}
            </router-link>
            <div class="price">{{ item.sale_price || item.price }}</div>
            <div class="addCart">
              <el-button class="add" @click="addtocart(item)">
                加入购物车</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addCart, updateCart } from "../assets/js/request.js";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      userId: "",
      noData: false,
      loading: false,
    };
  },
  computed: {
    ...mapState("products", ["products"]),
    ...mapState("cart", ["cartProducts"]),
    ...mapGetters("cart", ["selectPrice"]),
    recommendProds() {
      return this.products.filter((ele) => ele.classify_id != 358);
    },
    isCheckAll: {
      set(value) {
        this.cartProducts.forEach((ele) => {
          ele.isChecked = value;
        });
      },
      get() {
        if (this.cartProducts.length == 0) return false;
        return this.cartProducts.every((ele) => ele.isChecked == true);
      },
    },
    cartShow() {
      let arr = [...this.cartProducts];
      arr.forEach((ele) => {
        let reg = new RegExp(ele.s_good.name, "gi");
        if (ele.s_good.classify_ids.split(",")[1] != 207) {
          ele.parts = this.products
            .filter((item) => item.classify_ids.split(",")[1] == 207)
            .filter((item) => item.classify_id != 358)
            .filter((item) => reg.test(item.desc.split("-")[0]));
        }
      });
      return arr;
    },
  },
  methods: {
    ...mapActions("cart", ["addtocart", "increment", "decrement", "delone"]),
    // 添加购物车
    addProduct(id) {
      let arr = this.cartProducts.filter((ele) => ele.goods_id == id);
      if (arr.length) {
        let data = {
          num: arr[0].num + 1,
        };
        updateCart(arr[0].id, data).then(() => {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        });
      } else {
        addCart({
          goods_id: id,
          num: 1,
          project_id: 13,
        });
      }
    },
    // 删除商品
    open(item) {
      this.$confirm("确定要删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.delone(item);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //清空购物车
    clearCart() {
      this.$confirm("确定要清空购物车么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.cartProducts.forEach((ele) => {
            this.delone(ele);
          });
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "清空成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消清空",
          });
        });
    },
    // 下单
    checkOutOrder() {
      // sessionStorage.setItem("checkout", JSON.stringify(this.cartProducts));
      if (this.cartProducts.some((ele) => ele.isChecked == true)) {
        this.$router.push("/order/checkout");
      } else {
        this.$message({
          type: "warning",
          message: "请至少选择一个商品",
        });
      }
    },
    //单选
    handleOneChange(prod, value) {
      prod.isChecked = value;
      sessionStorage.setItem("cartProducts", JSON.stringify(this.cartProducts));
    },
  },
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }
  },
};
</script>

<style lang="scss" >
#cart {
  width: 100%;
  background: #efefef;
  padding: 50px 0;
  .container {
    width: 1140px;
    margin: 0 auto;
    .cart-main {
      width: 100%;
      font-size: 14px;
      color: #666;
      .cart-head {
        background-color: #fff;
        display: flex;
        padding: 29px 0;
        line-height: 30px;
        .check-all {
          display: flex;
          align-items: center;
          width: 170px;
          text-align: left;
          margin-left: 26px;
          cursor: pointer;
          .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: #ee0a3b;
            border-color: #ee0a3b;
          }
          .el-checkbox__inner:hover {
            border-color: #ee0a3b;
          }
          .el-checkbox__inner {
            border-color: #666;
          }
        }
        .title {
          width: 400px;
          text-align: left;
        }
        .price {
          width: 150px;
          text-align: center;
        }
        .count {
          width: 150px;
          text-align: center;
        }
        .totalPrice {
          width: 180px;
          text-align: center;
        }
      }
      .cart-list {
        cursor: pointer;
        background-color: #fff;
        .line {
          border-top: 1px solid #e0e0e0;
        }
        .item {
          padding-bottom: 1px;
          .product {
            display: flex;
            align-items: center;
            padding: 30px 0;
            & > div {
              height: 62px;
              line-height: 62px;
            }
            .check {
              margin-left: 26px;
              width: 50px;
              text-align: left;
              .el-checkbox__input.is-checked .el-checkbox__inner {
                background-color: #ee0a3b;
                border-color: #ee0a3b;
              }
              .el-checkbox__inner:hover {
                border-color: #ee0a3b;
              }
              .el-checkbox__inner {
                border-color: #666;
              }
            }
            .img {
              width: 120px;
              text-align: center;
              img {
                width: 62px;
                height: 62px;
              }
            }
            .title {
              width: 400px;
              overflow: hidden;
              font-size: 18px;
              a {
                color: #666;
              }
            }
            .price {
              text-align: center;
              width: 150px;
            }
            .count {
              width: 148px;
              height: 38px;
              border: 1px solid #e0e0e0;
              text-align: center;
              background-color: #fff;
              position: relative;
              zoom: 1;
              display: flex;
              & > div {
                width: 38px;
                height: 38px;
                line-height: 38px;
                color: #757575;
                font-size: 20px;
                font-weight: 700;
                cursor: pointer;
              }
              input {
                width: 72px;
                height: 36px;
                line-height: 38px;
                padding: 0;
                border-width: 0;
                color: #424242;
                font-size: 16px;
                text-align: center;
              }
            }
            .totalPrice {
              text-align: center;
              width: 180px;
              color: #ee0a3b;
            }
            .del {
              display: inline-block;
              width: 25px;
              height: 25px;
              line-height: 25px;
              padding: 1px;
              text-align: center;
              cursor: pointer;
              &:hover {
                color: #fff;
                border-radius: 13px;
                background: #ee0a3b;
              }
            }
          }
          .peijian {
            display: flex;
            justify-content: space-between;
            margin: 12px 0 12px 76px;
            border: 1px solid #dbdbdb;
            padding: 10px 28px;
            line-height: 62px;
            width: 1000px;
            .left {
              display: flex;
              span {
                width: 24px;
                height: 24px;
                display: block;
                .iconfont {
                  display: block;
                  width: 100%;
                  height: 100%;
                  font-size: 24px;
                  color: #ee0a3b;
                }
              }
              > a {
                width: 118px;
                height: 62px;
                text-align: center;
                line-height: 62px;
                img {
                  width: 62px;
                  height: 62px;
                  line-height: 62px;
                }
              }
              .peijian-name {
                a {
                  color: #666;
                }
              }
            }
            .peijian-price {
              color: #ee0a3b;
            }
          }
        }
      }
      .cart-foot {
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        border-top: 18px solid #efefef;
        overflow: hidden;
        .cart-act {
          width: 200px;
          line-height: 81px;
          margin-left: 26px;
          a {
            margin-right: 15px;
          }
          span {
            margin-left: 15px;
            cursor: pointer;
          }
        }
        .right {
          display: flex;
          .cart-count {
            height: 81px;
            line-height: 81px;
            color: #ee0a3b;
            font-size: 14px;
            span {
              font-size: 26px;
            }
            padding-right: 40px;
          }
          .checkout {
            button {
              color: #fff;
              font-size: 21.57px;
              background: #ee0a3b;
              padding: 26px 46px;
              border: 0;
            }
          }
        }
      }
    }
    .cart-null {
      background: #fff;
      overflow: hidden;
      .empty-cart {
        background: url(../assets/image/cart/empty-cart.png) no-repeat #fff;
        height: 200px;
        padding-left: 230px;
        padding-top: 20px;
        margin-left: 300px;
        margin-top: 50px;
        margin-bottom: 50px;
        span {
          display: block;
          color: #6e6e70;
          font-size: 36px;
          margin-bottom: 30px;
        }
        a {
          width: 182px;
          line-height: 42px;
          font-size: 22px;
          display: block;
          text-align: center;
          background: #ee0a3b;
          color: #fff;
          padding: 0.5rem;
        }
      }
    }
    //热门商品
    .recommend-goods {
      color: #333;
      font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;
      font-size: 14px;
      line-height: 1.5;
      padding: 0;
      background: #fff;
      margin: 0 auto;
      overflow: hidden;
      margin-top: 20px;
      & > .title {
        padding-left: 15px;
        line-height: 50px;
        border-bottom: 1px solid #efefef;
        font-size: 20px;
      }
      .list {
        text-align: center;
        .item {
          width: 269px;
          height: 377px;
          display: inline-block;
          border: 1px solid #ddd;
          padding: 5px 10px;
          margin: 20px 0;
          overflow: hidden;
          a {
            img {
              width: 247px;
              height: 247px;
            }
          }
          & > .title {
            text-align: left;
            display: block;
            width: 247px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            white-space: nowrap;
            padding: 0;
            overflow: hidden;
            &:hover {
              color: #ee0a3b;
            }
          }
          .price {
            color: #ee0a3b;
            text-align: left;
          }
          .addCart {
            margin-top: 10px;
            padding: 10px 0;
            border-top: 1px solid #efefef;
            text-align: center;
            button {
              background: #ee0a3b;
              color: #fff;
              border: 1px solid #ee0a3b;
              padding: 10px;
              font-size: 14px;
            }
          }
        }
      }
    }
    .del-tips {
      position: fixed;
      top: 50px;
      left: 50%;
      transform: translate(-50%);
      width: 400px;
      height: 200px;
      background-color: #fff;
      text-align: center;
      border: 1px solid #858695;
      border-radius: 5px;
      span {
        display: block;
      }
    }
  }
}
a {
  color: #666;
}
</style>